<template>
	<b-layout-index>
		<navbar bgcolor="#fff" :title="$t('账户提现')"></navbar>
		<u-action-sheet @select="goSelected" :cancelText="$t('取消')" @close="goCancel" :actions="list"
			:closeOnClickOverlay="true" :closeOnClickAction="true" :show="show">
		</u-action-sheet>
		<view class="mg-5" :style="{ '--colorPrimary': color.primary }">
			<view class=" bg-header font-size-12   mg-top-10 br-rd-10 pd-10">

				<u-cell>
					<view slot="title" class="font-size-12 color-white ">
						<u--text color="#fff" size="12" :text="$t('当前可提现余额')"></u--text>
					</view>
					<view slot="label" class="pd-top-10 pd-bottom-5">
						<u--text color="#fff" size="30" mode="price" :text="info.balance"></u--text>
					</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="icon">
						<iconfont icon="icon-chenggong" color="#fff" />
					</view>
					<view slot="title" class="font-size-12 color-white text-indent">
						<u--text color="#fff" size="12" :text="$t('银行级安全保障')"></u--text>
					</view>
					<view slot="value" class="font-size-12 color-white">

						<text>5000￥</text>/<text>{{$t('日')}}</text>
					</view>
				</u-cell>

			</view>
			<view class=" bg-white  mg-top-10 br-rd-10 mg-bottom-10">

				<u-cell :border="false" @click="goOpen" :clickable="true" isLink>
					<view slot="icon" class="bankicon" :style="{'backgroundColor':hexToRgb(selectedItem.color)}">
						<iconfont :color="selectedItem.color" size="20" :icon="selectedItem.icon" />
					</view>
					<view slot="title" class="font-size-12 font-bold text-indent">{{selectedItem.name}}</view>
					<view slot="label" class="text-indent font-size-10 grid-text">
						<text v-if="selectedItem.type==0">{{$t('储蓄卡')}}</text><text v-if="selectedItem.type==0"
							class="pd-left-5 pd-right-5">|</text><text>{{$t('续费')}}</text>
						<text class="pd-left-5 pd-right-5" v-if="selectedItem.cardNo">|</text><text
							class="cardNo">{{bankCardNo(selectedItem.cardNo)}}</text>
					</view>
				</u-cell>

			</view>

			<view class=" bg-white   pd-right-10 pd-left-10 br-rd-10">
				<u-cell :border="false">

					<view slot="title" class="font-size-10 flex-item">
						<text class="text"> {{$t("提现金额")}}</text>
						<view class="font-size-12 text" style="display: flex;">
							<iconfont :color="color.primary" icon="icon-naozhong" />
							<text class="pd-left-5 pd-right-5">{{$t('预计{0}小时内到账',[48])}}</text>
						</view>
					</view>

					<view slot="label" class=" font-size-10 grid-text">
						<u--form :labelWidth="100" labelPosition="left" :model="form" :rules="rules" ref="form1">
							<!-- 	<u-form-item :label="$t('payoutName')" prop="form.name" :labelWidth="120" ref="item1">
				<u--input :readonly="true"  v-model="selectedItem.userName" border="none" type="digit"></u--input>
			</u-form-item> -->
							<u-form-item prop="form.price" ref="item2">

								<view class="pd-20 priceBg ltr">
									<u--input   v-model="form.amount" border="none" prefixIcon="rmb" fontSize="20"
										prefixIconStyle="font-size:26px;font-weight: bold;"
										:placeholder="$t('请输入提现金额')" placeholderStyle="font-size:14px;"></u--input>
								</view>

							</u-form-item>

						</u--form>
					</view>
				</u-cell>



				<view class=" mg-top-10">
					<u-cell-group :border="false">
						<u-cell :border="false" >
							<view slot="title" class="font-size-12 text">{{$t('全部提现')}}</view>
							<view class="" slot="value" class="font-size-12">
								<text>{{$t("手续费")}}</text>:<text  v-if="info.servisefee>0">{{info.servisefee}}￥</text><text v-else>{{$t("免费")}}</text>
							</view>
						<!-- 	<view class="" slot="value"><text
									class="u-error font-bold">{{form.amount>0?(form.amount-((form.amount*info.taxes)/100)-info.servisefee):0}}￥</text>
							</view> -->
						</u-cell>
					<!-- 	<u-cell :border="false"  v-if="info.taxes>0">
								<view slot="title" class="font-size-12">{{$t('税金')}}</view>
							<view class="" slot="value"><text
									class="u-error font-bold">{{(form.amount*info.taxes)/100}}￥</text></view>
						</u-cell>
						<u-cell :border="false"  v-if="info.servisefee>0">
								<view slot="title" class="font-size-12">{{$t('服务费')}}</view>
							<view class="" slot="value"><text class="u-error font-bold">{{info.servisefee}}￥</text>
							</view>
						</u-cell> -->
					</u-cell-group>
				</view>
			</view>
			<view class="mg-top-10 pd-20">
				<u-button shape="circle" type="primary" :color="color.primary" :loading="loading" :loadingText="$t('加载中')"
					@click="submit">{{$t('确认提现')}}</u-button>
			</view>

			<u-action-sheet @close="goCancel" round="10" :closeOnClickOverlay="true" :cancelText="$t('取消')" :title="$t('选择银行')"
				:closeOnClickAction="true" :show="show">
				<view style="text-align: justify;">
					<u-cell-group>

						<u-cell @click="selectedClick(item)" v-for="(item,index) in cardList" isLink>
							<iconfont slot="icon" :color="item.color" size="25" :icon="item.icon" />
							<view slot="title" class="pd-left-5 pd-right-5 font-size-14">{{item.name}}</view>
							<view slot="value" class="font-size-12">{{item.userName}}</view>
							<view slot="label" class="font-size-12 text-indent">
								<text
									class="cardNo">{{bankCardNo(item.cardNo)}}</text>
							</view>
						</u-cell>

					</u-cell-group>
					<view class=" bgbb br-rd-10">

						<u-cell linkType="redirectTo" url="/page/usercenter/pages/bank/index" :border="false"
							icon="plus-circle-fill">
							<view class="title pd-right-5 pd-left-5 font-size-12" slot="title">{{$t('添加银行卡')}}</view>
						</u-cell>
					</view>
				</view>
			</u-action-sheet>
		</view>
	</b-layout-index>
</template>

<script>
	import {
		findByMyWithdrawal
	} from "@/api/userWallet.js"
	import {
		getByBanksMyList,
		findByEditMyBank
	} from "@/api/bank.js"
	export default {
		data() {
			var userWalletFindByInfo = wx.getStorageSync("userWalletFindByInfo")
			return {
				title: '标题',
				list: [{
						name: ' ئۈندىدار ئىككىلىك كود ئارقىلىق پۇل چۈشۈرۈش'
					},
					{
						name: ' بانكا كارتىسى ئارقىلىق پۇل چۈشۈرۈش '
					}
				],
				show: false,
				paymentName: "",
				selectedItem: {
					color: "#000000",
					icon: "icon-tuisong",
					name: this.$t("切换提现方式"),
					userName: "",
					bankCardId: 0,
					bankId: 0
				},
				form: {
					name: "Serkol",
					amount: null
				},
				info: userWalletFindByInfo,
				cardList: [],
				loading: false

			};
		},
		onLoad() {
			this.getData()

		},
		methods: {
			getData: function() {
				var the = this;
				getByBanksMyList().then(res => {
					console.log(res)
					the.cardList = res;
				})
			},

			goCancel: function() {

				this.show = false
			},
			goOpen: function(e) {

				this.show = true
			},
			goSelected: function(e) {
				console.log("HHHHHHHHHHHHHHHHHHH", e)
				this.paymentName = e.name
			},
			submit() {
				let the = this;
				this.loading = true
				if (this.form.bankCardId > 0) {
					if (this.form.amount <= this.info.balance) {
						console.log(this.form)

						findByMyWithdrawal(this.form).then(res => {
							the.loading = false
							uni.showToast({
								title: "提现成功",
								icon: "success",
								success: function() {
									uni.navigateBack({
										delta: 0
									})
								}
							})
						}).catch(e => {
							the.loading = false
							uni.showToast({
								title: "提现失败",
								icon: "error",
								success: function() {
									uni.navigateBack({
										delta: 0
									})
								}
							})
						})
					} else {
						the.loading = false
						uni.showToast({
							title: "余额不足。",
							icon: "error"
						})
					}
				} else {
					the.loading = false
					uni.showToast({
						title: "选择卡包。",
						icon: "error"
					})
				}
			},
			selectedClick: function(item) {
				console.log(item)
				this.form.name = item.userName;
				this.form.bankId = item.bankId
				this.form.bankCardId = item.id
				this.paymentName = item.name
				this.selectedItem = item;
				this.show = false
			},
			hexToRgb(hex) {
				const bigint = parseInt(hex.slice(1), 16);
				const r = (bigint >> 16) & 255;
				const g = (bigint >> 8) & 255;
				const b = bigint & 255;
				return `rgb(${r}, ${g}, ${b},0.3)`;
			},

			bankCardNo(cardNo) {
				if (cardNo) {
					// 假设银行卡号至少有12位
					if (cardNo.length >= 12) {
						// 提取前5位和后6位
						const start = cardNo.substring(0, 5);
						const end = cardNo.substring(11);
						// 中间部分替换为星号
						const middle = '******';
						// 组合成新的字符串
						return start + middle + end;
					} else {
						// 如果银行卡号长度不足12位，直接返回原卡号
						return cardNo;
					}
				} else {
					return cardNo;
				}
			}
		}
	};
</script>

<style>
	.bg-header {
		background-color: var(--color-primary);
		color: #fff !important;
	}

	.priceBg {
		background-color: #F9FAFB;
		font-weight: bold;
		border-radius: 6px;
		width: 90%;
	}

	.text-indent {
		text-indent: 10px;
	}

	.grid-text {
		color: #909399;
	}

	.text {
		color: var(--color-primary);
	}

	.bankicon {
		height: 30px;
		width: 30px;
		text-align: center;
		line-height: 30px;
		border-radius: 50px;
	}

	.cardNo {
		direction: ltr !important;
	}

	.flex-item {
		display: flex;
		justify-content: space-between;
	}
</style>